<template>

    <div>
        <el-page-header @back="goBack" :icon="ArrowLeft" title="返回">
            <template #content>
                <span class="text-large font-600 mr-3"> 添加用户信息展示 </span>
            </template>
        </el-page-header>
        <div class="wrapper">
            <div v-if="addItem">
                <ItemComp v-for="(v,k) in addItem" :key="k" :label="k" :value="v" />
                <ItemComp label="添加者" :value="user" />
            </div>
            <div v-else>
                <el-skeleton :rows="6" animated />
            </div>
        </div>
    </div>

</template>

<script>
import { useRouter } from 'vue-router';
import ItemComp from "./component/Item.vue";
import { ArrowLeft } from '@element-plus/icons-vue'
import { ref } from 'vue';
import { mapState } from 'pinia';
import { useUserStore } from '../../../../store/user';
export default {
    components: {
        ItemComp
    },
    setup() {
        const router = useRouter();
        const addItem = sessionStorage.getItem("addItem");
        const addItemRef = ref(null);
        setTimeout(() => {
            if (addItem) {
                addItemRef.value = JSON.parse(addItem);
            }
        }, 1000);
        return {
            goBack() {
                console.log(router);
                router.push({
                    name: "addUser"
                });
            },
            ArrowLeft,
            addItem: addItemRef
        }
    },
    computed: {
        ...mapState(useUserStore, ["user"])
    }
}
</script>

<style lang="less" scoped>
.wrapper {
    width: 80%;
    margin: 50px auto;
    box-shadow: 0 0 3px rgba(0, 0, 0, .3);
    padding: 27px;
    border-radius: 5px;
}
</style>